<script setup lang="ts">
import ImagePreview from "@/components/preview/view/imagePreview.vue";
import SvgIcon from "@/components/svg-icon/index.vue";
import {useCommonStore} from "@/stores/common";
import VideoPreview from "@/components/preview/view/videoPreview.vue";

const commonStore = useCommonStore()
const props = defineProps(["type", "id"])
</script>

<template>
  <image-preview v-if="type == 'image'" :id="id"></image-preview>
  <div class="preview" v-else>
    <div class="left">

    </div>
    <div class="content">
      <video-preview :id="id" v-if="type == 'video'"></video-preview>
    </div>
    <div class="right">
      <span class="btn" @click="commonStore.isPreview=false">
        <svg-icon style="width: 30px;height: 30px" name="close1"/>
      </span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.preview {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.62);
  display: flex;

  .left {
    flex: 1;
  }

  .right {
    flex: 1;

    .btn {
      margin-left: auto;
      margin-top: 40px;
      margin-right: 40px;
      text-align: center;
      line-height: 50px;
      width: 50px;
      height: 50px;
      display: block;
      border-radius: 100px;
      background-color: rgba(0, 0, 0, 0.54);
    }
  }

  .content {
    min-width: 1300px;
  }

}
</style>